<template>
    <lay-card width="1200" style="height: 800px">
      <lay-row space="20">
        <lay-col md="24">
          <lay-quote size="sm">
            <h3>统计报表汇总</h3>
          </lay-quote>
        </lay-col>
      </lay-row>
      <lay-row space="20">
        <lay-col md="1"></lay-col>
        <lay-col md="11">
            <lay-form :model="params" ref="layFormRef4" required>
                <lay-form-item label="报表名称" prop="tables">
                  <lay-select
                      v-model="params.tables"
                      placeholder="请选择报表"
                      :multiple="true"
                      style="width: 100%"
                  >
                    <lay-select-option :value="unit" :label="unit" v-for="unit in projects"></lay-select-option>
                  </lay-select>
                </lay-form-item>
                <lay-form-item label="HS域账号" prop="user">
                  <lay-input v-model="params.username" placeholder="请输入域账号"></lay-input>
                </lay-form-item>
                <lay-form-item label="账号密码">
                  <lay-input v-model="params.password" type="password">></lay-input>
                </lay-form-item>
                <lay-form-item style="text-align: center;">
                  <lay-button type="normal" @click="submitFile">下载&合并报表</lay-button>
                </lay-form-item>
                <lay-form-item label="汇总进度">
                    <div style="height: 20px"></div>
                    <lay-progress
                        show-text="汇总进度"
                        :percent="progress"
                    ></lay-progress>
                </lay-form-item>
            </lay-form>
        </lay-col>
        <lay-col md="1"></lay-col>
        <lay-col md="10">
          <QueryRecord :page="'tables'" :date="cur_date"></QueryRecord>
        </lay-col>
      </lay-row>
    </lay-card>
</template>

<script lang="ts">
export default {
    name: "UploadExcel"
}
</script>

<script lang="ts" setup>
import {onMounted, onUnmounted, reactive, ref} from "vue";
import {notify} from "../../../untils/tip";
import {layer} from "@layui/layer-vue";
import {
  downloadTablesApi,
  queryDownloadProgressApi,
  queryProgressApi,
  queryProjects, queryTablesApi,
  uploadExcel
} from "../../../api/fastApi/fastApi";
import QueryRecord from "./QueryRecord.vue";

onMounted(() => {
    queryTables();
})

const cur_date = ref('');
const projects = ref([]);
const active = ref(-1);
const progress = ref(0)
const file = ref([]);
const params = reactive({
    username: '',
    password: '',
    tables: []
})

const queryTables = async () => {
    let response = await queryTablesApi({});
    if(response.status === 200){
        projects.value = response.result.tables;
        cur_date.value = response.result.date;
    }
}

const countInsert = ref(0);
const timerInsert = ref();

const queryProgress = async () => {
    let {result, status, message} = await queryDownloadProgressApi({});
    if(status === 200){
       progress.value = result.progress;
       if(result === 100){
          clearInterval(timerInsert.value);
          notify("success", '报表下载完成！')
       }
    }
    countInsert.value ++;
    if(countInsert.value > 300){
      clearInterval(timerInsert.value);
      notify("failed", "超时退出！")
    }
}

// 上传文件并解压
const layId = ref()
const submitFile = async () => {
  const formData = new FormData();
  formData.append('username', params.username);
  formData.append('password', params.password);
  formData.append('tables', params.tables);
  console.log(formData);
  let response = await downloadTablesApi(formData);
  layer.close(layId.value);
  if (response.result === true) {
    notify('success', "开始下载报表！");
    timerInsert.value = setInterval(queryProgress, 2000)
  } else {
    notify('fail', response.message);
  }
};


// 销毁前清理定时任务
onUnmounted(() => {
  if(timerInsert.value){
    clearInterval(timerInsert.value);
  }
  timerInsert.value = ''
})
</script>

<style scoped>

</style>